<template>
  <el-container>
    <el-header>
      <Header></Header>
    </el-header>
    <el-divider></el-divider>
    <div style="align-self: center">
      <el-input style="width:200px" placeholder="请输入用户名" suffix-icon="el-icon-search"></el-input>
      <el-input style="width:200px" placeholder="请输入昵称" suffix-icon="el-icon-search"></el-input>
      <el-input style="width:200px" placeholder="请输入身份" suffix-icon="el-icon-search"></el-input>
      <el-button @click="search_user" class="ml-5" type="primary">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>
    <el-divider></el-divider>
    <el-table
        style="align-self: center"
        border
        :header-cell-style="headStyle"
        :data="tableData">
      <el-table-column prop="userId" label="用户序号" width="100">
      </el-table-column>
      <el-table-column prop="userName" label="用户名" width="100">
      </el-table-column>
      <el-table-column prop="password" label="密码" width="100">
      </el-table-column>
      <el-table-column prop="nickname" label="昵称" width="100">
      </el-table-column>
      <el-table-column prop="userDescription" label="个人简介" width="200">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="200">
      </el-table-column>
      <el-table-column prop="registTime" label="注册时间" width="150">
      </el-table-column>
      <el-table-column prop="modifiTime" label="修改时间" width="150">
      </el-table-column>
      <el-table-column prop="gender" label="性别" width="50">
      </el-table-column>
      <el-table-column prop="phoneNumber" label="联系方式" width="100">
      </el-table-column>
      <el-table-column prop="idNumber" label="身份证号" width="100">
      </el-table-column>
      <el-table-column prop="identity" label="身份" width="100">
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="primary" @click="edit(scope.row);dialogeditVisible=true">修改</el-button>
          <el-button type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div  style="padding:10px 0">
      <el-pagination
          :current-page="currentPage"
          :page-sizes="[5, 7, 10, 12]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
          style="margin-left: 300px">
      </el-pagination>
    </div >
    <el-dialog title="修改用户" :visible.sync="dialogeditVisible">
      <el-form :model="userInfor">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="userInfor.userName" autocomplete="off" @input="changNo"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="userInfor.password" autocomplete="off" @input="changNo"></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="userInfor.nickname" autocomplete="off" @input="changNo"></el-input>
        </el-form-item>
        <el-form-item label="个人简介" :label-width="formLabelWidth">
          <el-input v-model="userInfor.userDescription" autocomplete="off" @input="changNo"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="userInfor.email" autocomplete="off" @input="changNo"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="userInfor.phoneNumber" autocomplete="off" @input="changNo"></el-input>
        </el-form-item>
        <el-form-item label="身份" :label-width="formLabelWidth" prop="appCategory2">
          <el-input v-model="userInfor.identity" autocomplete="off" @input="changNo"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogeditVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogeditVisible = false ;">确认</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import Header from "@/components/Header";
export default {
  name: "usermanage",
  components: {Header},
  data() {
    return {
      activeIndex: '1',
      pagesize:5,
      currentPage:1,
      dialogeditVisible:false,
      userInfor:{
        userName: '',
        password: '',
        nickname: '',
        userDescription: '',
        email: '',
        gender: '',
        phoneNumber: '',
        identity:'',
      },
      tableData: [{
        userId: '1',
        userName: '朱绪东',
        password: '123456',
        nickname: '朱绪东',
        userDescription: '1creating for test',
        email: 'test1@sina.com',
        registTime: '2022/9/2 20:00:00',
        modifiTime: '2022/9/2 20:00:00',
        gender: '男',
        phoneNumber: '13304822398',
        IDnumber: 'null',
        identity: '2',
      },
        {
          userId: '2',
          userName: '李四',
          password: '543216',
          nickname: '李四',
          userDescription: 'creating2 for test',
          email: 'test3@163.com',
          registTime: '2022/9/2 20:00:00',
          modifiTime: '2022/9/2 20:00:00',
          gender: '男',
          phoneNumber: '13623942344',
          IDnumber: 'null',
          identity: '2',
        },{
          userId: '3',
          userName: '梁祺',
          password: '456123',
          nickname: '梁祺',
          userDescription: 'creating for 3test',
          email: 'test3@163.com',
          registTime: '2022/9/2 20:00:00',
          modifiTime: '2022/9/2 20:00:00',
          gender: '男',
          phoneNumber: '13623942344',
          IDnumber: 'null',
          identity: '2',
        },{
          userId: '1',
          userName: '朱绪东',
          password: '123456',
          nickname: '朱绪东',
          userDescription: '1creating for test',
          email: 'test1@sina.com',
          registTime: '2022/9/2 20:00:00',
          modifiTime: '2022/9/2 20:00:00',
          gender: '男',
          phoneNumber: '13304822398',
          IDnumber: 'null',
          identity: '2',
        },{
          userId: '4',
          userName: '赵六',
          password: '654321',
          nickname: '赵六',
          userDescription: 'creating 4 test',
          email: 'test4@sina.com',
          registTime: '2022/9/2 20:00:00',
          modifiTime: '2022/9/2 20:00:00',
          gender: '男',
          phoneNumber: '13323454493',
          IDnumber: 'null',
          identity: '2',
        },{
          userId: '5',
          userName: '张书恒',
          password: '543216',
          nickname: '李四',
          userDescription: 'creating for test5',
          email: 'test5@sina.com',
          registTime: '2022/9/2 20:00:00',
          modifiTime: '2022/9/2 20:00:00',
          gender: '男',
          phoneNumber: '15968653781',
          IDnumber: 'null',
          identity: '2',
        }]
    }
  },
  methods:{
    edit(rowdata){
    this.userInfor.userName=rowdata.userName;
      this.userInfor.identity=rowdata.identity;
      this.userInfor.phoneNumber=rowdata.phoneNumber;
      this.userInfor.gender=rowdata.gender;
      this.userInfor.userDescription=rowdata.userDescription;
      this.userInfor.password=rowdata.password;
      this.userInfor.email=rowdata.email;
      this.userInfor.nickname=rowdata.nickname;
    },
    changNo(){
      this.$forceUpdate(0)
    },
    headStyle(){
      return "text-align:center"
    }
  }
}
</script>

<style scoped>

</style>